<template>
   <div>
      <div class="register_con">
         <div class="l_con fl">
            <a class="reg_logo"><img src="../../assets/images/logo.png"></a>
            <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
            <div class="reg_banner"></div>
         </div>

         <div class="r_con fr">
            <div class="reg_title clearfix">
               <h1>用户注册</h1>
               <a href="#">登录</a>
            </div>
            <div class="reg_form clearfix" id="app" v-cloak>
               <ul>
                  <li>
                     <label>用户名:</label>
                     <input type="text" v-model="username" @blur="check_username" name="user_name" id="user_name">
                     <span class="error_tip">{{error_name}}</span>
                  </li>
                  <li>
                     <label>密码:</label>
                     <input type="password" v-model="password" @blur="check_pwd" name="pwd" id="pwd">
                     <span class="error_tip">{{error_password}}</span>
                  </li>
                  <li>
                     <label>确认密码:</label>
                     <input type="password" v-model="password2" @blur="check_cpwd" name="cpwd" id="cpwd">
                     <span class="error_tip">{{error_password2}}</span>
                  </li>
                  <li>
                     <label>手机号:</label>
                     <input type="text" name="phone" v-model="phone" @blur="check_phone" id="phone">
                     <span class="error_tip">{{error_phone}}</span>
                  </li>
                  <li>
                     <label>验证码:</label>
                     <input type="text" v-model="img_code" @blur="check_img_code" name="img_code" id="img_code"
                            class="msg_input">
                     <img :src="'http://127.0.0.1:8000/user/img_code/?key='+this.uuid_code" alt="" @click="change_img_code" class="get_msg_code">
                     <span class="error_tip">{{ img_code_error_tip }}</span>
                  </li>
                  <!--                     <li>-->
                  <!--                        <label>短信验证码:</label>-->
                  <!--                        <input type="text" v-model="sms_code" @blur="check_sms_code" name="msg_code" id="msg_code"-->
                  <!--                               class="msg_input">-->
                  <!--                        <a href="javascript:;" @click="send_sms_code" class="get_msg_code">{{ sms_code_tip }}</a>-->
                  <!--                        <span v-show="error_sms_code" class="error_tip">{{ sms_code_error_tip }}</span>-->
                  <!--                     </li>-->
                  <li class="agreement">
                     <input type="checkbox" v-model="allow" @change="check_allow" name="allow" id="allow"
                            checked="checked">
                     <label>同意”美多商城用户使用协议“</label>
                     <span class="error_tip2">{{error_allow}}</span>
                  </li>
                  <li class="reg_sub">
                     <input type="button" value="注 册" @click="register">
                  </li>
               </ul>
            </div>
         </div>
      </div>
      <BaseBodyer></BaseBodyer>
   </div>
</template>

<script>
   import '../../assets/css/main.css'
   import '../../assets/css/reset.css'

   import {uuid} from 'vue-uuid'

   import BaseBodyer from "../Header/BaseBodyer";

   export default {
      name: "Register",
      components: {
         BaseBodyer,
      },
      data() {
         return {
            username: '',
            password: '',
            password2: '',
            phone: '',
            img_code: '',
            allow: false,

            error_name: '',
            error_password: '',
            error_password2: '',
            error_phone: '',
            error_allow: '',
            img_code_tip: '',
            error_img_code: '',
            img_code_error_tip: '',
            uuid_code: uuid.v1()

         }
      },
      methods: {
         check_username() {
            // 进行 前端的正则验证, 要求 用户名 2-12 个字符组成
            if (/^.{2,12}$/.test(this.username)) {
               this.$axios({
                  url: 'user/unique/',
                  method: 'POST',
                  data: {
                     username: this.username
                  }
               }).then(resp => {
                  this.error_name = resp.data.msg
                  console.log()
               }).catch(error => {
                  console.log(error)
               })
            } else {
               this.error_name = '请输入2-20个字符的用户'
               this.username = ''
            }
         },
         check_pwd() {
            // 进行 前端的正则验证, 要求 密码 6-20个字符组成
            if (/^\d{6,20}$/.test(this.password)) {
               this.error_password = ''
            } else {
               this.error_password = '密码最少6位，最长20位'
               this.password = ''
            }
         },
         check_cpwd() {
            // 验证 密码是否一致
            if (this.password2 === this.password) {
               this.error_password2 = ''
            } else {
               this.error_password2 = '两次输入的密码不一致'
               this.password2 = ''
            }
         },
         check_phone() {
            // 进行 前端的正则验证, 要求 手机号 11位 号段 3-9
            if (/^1[3-9]\d{9}$/.test(this.phone)) {
               this.error_phone = ''
            } else {
               this.error_phone = '您输入的手机号格式不正确'
            }
         },
         check_img_code() {

         },
         check_allow() {
            if (this.allow) {
               this.error_allow = ''
            } else {
               this.error_allow = '请勾选同意'
            }
         },
         change_img_code() {
            this.uuid_code = uuid.v1()
            console.log(uuid.v1())
         },
         register() {
            if (!this.allow) {
               this.error_allow = '请勾选同意'
            } else {
               this.$axios({
                  url: 'user/register/',
                  method: 'POST',
                  data: {
                     username: this.username,
                     password: this.password,
                     phone: this.phone,
                     key: this.uuid_code,
                     img_code: this.img_code
                  }
               }).then(resp => {
                  alert(resp.data.msg)
                  console.log(resp.data.error)

               }).catch(error => {
                  console.log(error)
               })
            }
         }

      },
      computed: {},
      filters: {},
      watch: {},
   }
</script>

<style scoped>

</style>
